<template>
  <div class="week_task">
    <one-title title="当周任务及进度看板" @refreshData="refresh"></one-title>
    <div class="fixed_top_56">
      <div class="multiple_search">
        <div class="search_item">
          <div class="select_label">选择班组：</div>
          <div class="search_wrapper">
            <el-select placeholder="请选择班组"
                       v-model="workgroupId"
                       size="small">
              <el-option
                v-for="(item, index) in workGroup"
                :key="index"
                :label="item.LABEL"
                :value="item.ID">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="mes_btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            class="search_btn"
            @click="init">
          </el-button>
        </div>
      </div>
      <div class="task_container" v-loading="isLoading">
        <div class="task_type">
          <div class="task_item" :key="index" v-for="(item, index) in taskTypeList">
            <div class="task_icon" :style="{backgroundColor: item.color}">
              <i class="iconfont" :class="item.icon"></i>
            </div>
            <div class="task_body">
              <div class="task_number">{{item.number}}</div>
              <div class="task_title">{{item.title}}</div>
            </div>
          </div>
        </div>
        <div class="table_container">
          <el-table
            border
            stripe
            ref="tableNode"
            :data="listData.dataList"
            :cell-class-name="setCellClass"
            :max-height="tableMaxHeight - 80">
            <mes-col-comp
              :key="index"
              v-for="(column, index) in colConfig"
              :column="column"></mes-col-comp>
            <el-table-column
              label="生产进度"
              :resizable="false"
              width="200">
              <template slot-scope="scope">
                <div class="schedule_cont">
                  <div class="progress_item"
                       :style="progressCount(scope.row)"
                       v-if="scope.row.productionSchedule !== '0%'"></div>
                  <span class="progress_number">{{scope.row.productionSchedule}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="estimateEffort"
              :resizable="false"
              label="总工时"
              min-width="80">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import colConfig from './weekTaskCol'

export default {
  name: 'WeekTask',
  data() {
    return {
      colConfig: colConfig,
      workgroupId: '',
      isLoading: false,
    }
  },
  computed: {
    workGroup() {
      return this.$store.state.weekTask.workGroup
    },
    listData() {
      return this.$store.state.weekTask.listData
    },
    taskTypeList() {
      return [
        {
          number: this.listData.inprocess || 0,
          title: '班组在制品数量',
          icon: 'icon-zaizhipinshuliang',
          color: '#00a949'
        },
        {
          number: this.listData.delay || 0,
          title: '班组延期任务数量',
          icon: 'icon-yanqirenwushuliang',
          color: '#ff4d4f'
        },
        {
          number: this.listData.tobeallocated || 0,
          title: '班组待分配任务数量',
          icon: 'icon-daifenpeirenwushuliang',
          color: '#00b4ff'
        },
        {
          number: this.listData.totaltime || 0,
          title: '班组总工时',
          icon: 'icon-banzuzonggongshi',
          color: '#ffa940'
        },
      ]
    }
  },
  mounted() {
    this.getWorkGroup()
  },
  methods: {
    refresh() {
      this.getWorkGroup()
    },
    // 设置单元格样式
    setCellClass({row, column}) {
      let isAfter = this.moment(row.planEndDate).isBefore(window.serverTime)
      if (isAfter && column.property === 'planEndDate') {
        return 'cell_isAfter'
      }
    },
    // 获取班组列表
    getWorkGroup() {
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/workgroup/workgroup/listfields/id,name as label',
        module: 'weekTask',
        state: 'workGroup'
      }).then(res => {
        this.workgroupId = res[0].ID
        this.init()
      })
    },
    init() {
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverbatch/turnoverBatch/taskProcessBoard',
        data: {
          workgroupId: this.workgroupId
        },
        module: 'weekTask',
        state: 'listData'
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 进度条长度
    progressCount(row) {
      let isAfter = this.moment(row.planEndDate).isBefore(window.serverTime)
      let bgColor = isAfter ? '#f8000f' : row.turnoverStatusValue === 'Normal' ? '#3c6' : row.turnoverStatusValue === 'InProblem' ? '#00b4ff' : '#ff931f'
      return {
        flex: `0 0 ${125 * row.productionSchedule.slice(0, -1) / 100}px`,
        backgroundColor: bgColor
      }
    }
  }
}
</script>

<style scoped lang="less">
  .week_task {
    .table_container {
      padding: 20px;
      .schedule_cont {
        display: flex;
        align-items: center;
        .progress_item {
          height: 20px;
        }
        .progress_number {
          padding-left: 5px;
          flex: 1;
        }
      }
    }
    .task_type {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      .task_item {
        flex: 0 0 390px;
        height: 120px;
        box-sizing: border-box;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        display: flex;
        .task_icon {
          flex: 0 0 150px;
          line-height: 118px;
          text-align: center;
          .iconfont {
            font-size: 56px;
            color: #fff;
          }
        }
        .task_body {
          padding-left: 20px;
          .task_number {
            color: #000;
            font-size: 36px;
            line-height: 50px;
            padding-top: 20px;
          }
          .task_title {
            color: #7e8e9f;
            font-size: 16px;
            line-height: 22px;
            padding-top: 5px;
          }
        }
      }
    }
  }
</style>
<style lang="less">
  .week_task {
    .cell_isAfter {
      span.mes_cell {
        color: #f8000f;
      }
    }
  }
</style>
